<template>
  <div>
    <x-table
      ref="refTable"
      name="审批列表"
      :top="55"
      :columns="columns"
      :init-sort="{ applyDateTime: 'descending' }"
      :data="tableData.resp.list"
      :total="tableData.resp.total"
      :loading="tableData.loading"
      @query="handleQuery"
    >
      <template #column-statue="scope">
        <el-tag :type="formatStatus(scope.data).type">{{ formatStatus(scope.data).text }}</el-tag>
      </template>
      <template #column-opera="scope">
        <div class="opera-col">
          <el-link plain type="primary" :underline="false" @click="handleOpenForm(scope.row)">
            <span class="text">查看表单</span>
          </el-link>
          <el-link plain type="primary" :underline="false" @click="handleOpenHis(scope.row)">
            <span class="text">查看流转</span>
          </el-link>
        </div>
      </template>
    </x-table>
    <DialogHis
      v-model:visible="state.visibleHis"
      :f-instance-name="state.currentItem.formInstanceName"
      :p-instance-id="state.currentItem.processInstanceId"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElTag } from 'element-plus'
import type { EpPropMergeType } from 'element-plus/es/utils/vue/props/types'
import { formRunApi } from '@/api/modules/flow/formRun'
import DialogHis from '../view/His.vue'

type StatusType =
  | EpPropMergeType<StringConstructor, '' | 'success' | 'danger' | 'warning' | 'info', unknown>
  | undefined

const state = reactive({ visibleHis: false, currentItem: {} as any })

const refTable = ref()
const tableData = reactive({ resp: { list: [], total: 0 }, loading: false })

const status = [
  { text: '通过', value: 2, type: 'success' as StatusType },
  { text: '驳回', value: 3, type: 'danger' as StatusType },
  { text: '完成', value: 4, type: 'warning' as StatusType },
  { text: '审批中', value: 1, type: '' as StatusType },
  { text: '草稿', value: 0, type: 'info' as StatusType }
]
const formatStatus = (val: number) => {
  const obj = status.filter(s => s.value == val)[0]
  return obj || {}
}

const columns: any[] = [
  { prop: 'formInstanceName', label: '表单名称', minWidth: 230, isGbk: true, fixed: true },
  { prop: 'formInstanceCode', label: '表单编号', minWidth: 170 },
  { prop: 'applyUserName', label: '申请人', minWidth: 110 },
  { prop: 'applyDateTime', label: '申请时间', minWidth: 170 },
  { prop: 'completedDateTime', label: '完成时间', minWidth: 170 },
  { prop: 'currentTask', label: '当前阶段', minWidth: 130 },
  {
    prop: 'statue',
    label: '状态',
    minWidth: 130,
    filters: status,
    exportFn: (data: any) => {
      return formatStatus(data)['text']
    }
  },
  { prop: 'opera', label: '操作', fixed: 'right', minWidth: 150, search: false, sortable: false }
]

const handleQuery = (page: AxiosType.Pagination) => {
  tableData.loading = true
  formRunApi.findMyApprovePage(page).then(resp => {
    if (resp.success) {
      tableData.resp = resp.data
    }
    tableData.loading = false
  })
}

const router = useRouter()
const handleOpenForm = (item: any) => {
  router.push({ name: 'flw-inst-view-form', query: { fid: item.formInstanceId } })
}
const handleOpenHis = (item: any) => {
  state.currentItem = item
  state.visibleHis = true
}
</script>

<style lang="scss" scoped>
.opera-col {
  display: flex;
  gap: 10px;
}
</style>
